<template>
    <section>
        <DetailsHeader title="订单详情" class="mb-24" />
        <div class="page-card">
            <div class="card-header">
                <span class="header-title">订单概况</span>
            </div>
            <div class="card-content">
                <a-row>
                    <a-col :span="8">
                        <label>订单号：</label>
                        <span>{{ form.orderId }}</span>
                    </a-col>
                    <a-col :span="8">
                        <label>订单创建时间：</label>
                        <span>{{ form.createdAt }}</span>
                    </a-col>
                    <a-col :span="8">
                        <label for="">订单状态：</label>
                        <span>
                            {{ selectDictLabel(orderStatusEnum, form.payStatus) }}
                        </span>
                    </a-col>
                    <a-col :span="8">
                        <label>订单类型：</label>
                        <span>{{ form.subject }}</span>
                    </a-col>
                    <a-col :span="8">
                        <label for="">支付时间：</label>
                        <span>{{ form.payTime }}</span>
                    </a-col>
                </a-row>
            </div>
        </div>

        <div class="page-card">
            <div class="card-header">
                <span class="header-title">商品详情</span>
            </div>
            <div class="card-content">
                <a-row v-if="form.orderType == 'storage'">
                    <a-col :span="8" v-if="form?.subject?.includes('实例存储')">
                        <label>实例ID：</label>
                        <span>{{ form.instanceId }}</span>
                    </a-col>
                    <a-col :span="8" v-if="form?.subject?.includes('网盘存储')">
                        <label>数据中心：</label>
                        <span>{{ form.instanceId }}</span>
                    </a-col>
                    <a-col :span="8">
                        <label>用量：</label>
                        <span>{{ printSize(form.byteSize) }}</span>
                    </a-col>
                </a-row>

                <a-row v-if="form.orderType == 'instance'">
                    <a-col :span="8">
                        <label>实例ID：</label>
                        <span>{{ form.instanceId }}</span>
                    </a-col>
                    <a-col :span="8">
                        <label>GPU：</label>
                        <span>{{ form.gpuName }}</span>
                    </a-col>
                    <a-col :span="8">
                        <label>CPU：</label>
                        <span>{{ form.cpuName }}</span>
                    </a-col>
                </a-row>
            </div>
        </div>

        <div class="page-card">
            <div class="card-header">
                <span class="header-title">订单概况</span>
            </div>
            <div class="card-content">
                <a-row v-if="form.orderType == 'storage'">
                    <a-col :span="8">
                        <label>单价(元)：</label>
                        <span>{{ form.price }}</span>
                    </a-col>
                    <a-col :span="8">
                        <label>结算时段：</label>
                        <span>{{ form.period }}</span>
                    </a-col>
                    <a-col :span="8">
                        <label for="">使用时长：</label>
                        <span>1小时</span>
                    </a-col>
                    <a-col :span="8">
                        <label for="">总价(元)：</label>
                        <span>{{ form.originAmount }}</span>
                    </a-col>
                    <a-col :span="8">
                        <label for="">实际支付金额：</label>
                        <span>{{ form.balanceAmount }}</span>
                    </a-col>
                </a-row>

                <a-row v-if="form.orderType == 'instance'">
                    <a-col :span="8">
                        <label>计算模式：</label>
                        <span>{{ form.payType == '1' ? '按量付费' : '预付费' }}</span>
                    </a-col>
                    <a-col :span="8">
                        <label>Gpu单价(元)：</label>
                        <span>{{ form.price }}</span>
                    </a-col>
                    <a-col :span="8">
                        <label for="">Gpu数量：</label>
                        <span>{{ form.gpuNum }}</span>
                    </a-col>
                    <a-col :span="8">
                        <label>结算时段：</label>
                        <span>{{ form.startTime }}~{{ form.closeTime }}</span>
                    </a-col>
                    <a-col :span="8">
                        <label for="">使用时长：</label>
                        <span>{{ dateLong(form.startTime, form.closeTime) }}</span>
                    </a-col>
                    <a-col :span="8">
                        <label for="">总价(元)：</label>
                        <span>{{ form.originAmount }}</span>
                    </a-col>
                    <a-col :span="8">
                        <label for="">实际支付金额：</label>
                        <span>{{ form.balanceAmount }}</span>
                    </a-col>
                </a-row>
            </div>
        </div>


    </section>
</template>

<script setup name="OrderDetail">
import DetailsHeader from '@/components/common/DetailsHeader.vue'
import { reactive, ref } from 'vue'
import { selectDictLabel, dateLong, printSize } from '@/libs/util.common'
import { getOrderDetailsApi } from 'api/modules/api.cost'
import { useRoute } from 'vue-router'
const route = useRoute();
const form = ref({})

const orderId = route.query.orderId || ''

const orderStatusEnum = [
    {
        label: '订单支付中',
        value: '1'
    },
    {
        label: '订单支付成功',
        value: '2'
    },
    {
        label: '订单支付成功',
        value: '3',
    },
    {
        label: '已退款',
        value: '4',
    }
]

orderId && getOrderDetails()

function getOrderDetails() {
    getOrderDetailsApi(orderId).then(res => {
        form.value = res.data
    })
}

</script>

<style scoped lang="less">
.page-card {
    padding: 24px;
    background: #ffffff;
    box-shadow: 0px 4px 4px 0px #E7EDF8;
    margin-bottom: 24px;

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;

        .header-title {
            color: #223354;
            font-family: PingFang SC;
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
        }
    }

    .card-content {
        .ant-col {
            margin-bottom: 24px;
        }

        label {
            color: #8A93A7;
            text-align: right;
            font-family: PingFang HK;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
        }

        span {
            color: #223354;
            font-family: PingFang HK;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
        }
    }
}
</style>
